<script setup lang="ts">
import { onMounted, ref } from 'vue';
import {RequestPath, startRequest, OperationalResponseData, OperationalItemData} from '../base/RequestWork'
import { ElMessage } from 'element-plus';

// 列表绑定的数据
let tableData = ref()
// 组件挂载时的生命周期函数
onMounted(()=>{
    // 请求所有运营位数据
    startRequest(RequestPath.operationalGet, 'get', {'status': 0}).then((response)=>{
        let data = response.data as OperationalResponseData
        tableData.value = data.datas ?? []
    }).catch((error)=>{
        ElMessage.error({
            message: error.response.data.error
        })
    })
}) 
// 更新运营位状态的方法
function changeState(item: OperationalItemData) {
    console.log(item)
    startRequest(RequestPath.operationalUpdate, 'post', {
        status: item.status == 0 ? 1 : 0,
        id: item.id
    }).then(()=>{
        // 请求成功后，修改列表绑定的数据
        tableData.value.forEach((element: OperationalItemData) => {
            if (element.id == item.id) {
                element.status = (item.status == 0 ? 1 : 0)
            }
        });
    }).catch((error)=>{
        ElMessage.error({
            message: error.response.error
        })
    })
}

</script>

<template>
       <div class="contentContainer">
        <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID"  width="80"/>
        <el-table-column label="封面" width="180">
            <template #default="scope">
                <el-image style="width: 200px; " :src="scope.row.cover" fit="contain" />
            </template>
        </el-table-column>
        <el-table-column prop="name" label="运营位名称" width="180" />
        <el-table-column prop="content" label="运营语" width="240"></el-table-column>
        <el-table-column prop="uri" label="落地页" width="100"></el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="280"></el-table-column>
        <el-table-column label="运营位状态">
            <template #default="scope">
                <el-tag :type="(scope.row.status == 0) ? 'info' : 'success'">{{ (scope.row.status == 0) ? '未启用' : '已启用' }}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button :type="(scope.row.status == 0) ? 'primary' : 'danger'" @click="changeState(scope.row)">{{ (scope.row.status == 0) ? '开启' : '禁用' }}</el-button>
            </template>
        </el-table-column>
        </el-table>
       </div>
</template>